<template>
	<scroll-view class="productDetails">
		<!-- 商品介绍 -->
		<view class="product">

			<!-- 轮播图 -->
			<view class="swipers">
				<swiper class="swiperItem" circular autoplay interval="3000">
					<swiper-item class="items" v-for="(item,index) in obj" :key="index">
						<image :src="ShowProduct.productImage"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 具体商品介绍 -->
			<view class="center">
				<view class="introduce">
					<view>
						<text class="text1">￥{{ShowProduct.productSeckill}}</text>
						<text class="text2">￥{{ShowProduct.productPrice}}</text>
						<image src="https://z3.ax1x.com/2021/04/09/cN7yJs.png"></image>
						<view @click="clickActive(ShowProduct)" class=""
							:class="['right-image',isActive==true?'active':'']"></view>
					</view>
					<view> {{ShowProduct.productDetail}}</view>
					<view>{{ShowProduct.productName}} 经典全合成</view>
					<view>畅销热卖 {{ShowProduct.productBrand}}</view>
				</view>
				<view class="factory">
					<text>原厂</text>
					<text>通过VW 502 00认证，满足vw 500 00要求</text>
				</view>
				<view class="Indemnity">
					<view>优驿正品保证 专业保险公司承保</view>
					<view>30亿正品险担保 累计赔付高达200万</view>
				</view>
			</view>


		</view>
		<!-- 商品评价 -->
		<view class="productEvaluation">
			<view class="evaluationBoby">
				<view class="header">
					<view>商品评价</view>
					<view>
						<text class="text1">好评率</text>
						<text class="text2">99.6%</text>
						<image src="https://z3.ax1x.com/2021/04/09/cUYpp6.png"></image>
					</view>
				</view>
				<view class="center">
					<view>A6车友评价（9）</view>
					<view>产品好（4061）</view>
					<view>正品（969）</view>
					<view>会回购（937）</view>

					<view>产品好（4061）</view>
					<view>正品（969）</view>
					<view>会回购（937）</view>
					<view>A6车友评价（9）</view>
				</view>
				<view class="evaluationItem">
					<view>
						<view class="left">
							<view class="left-image">
								<image src="https://z3.ax1x.com/2021/04/09/cUBd0K.png"></image>
							</view>
							<view class="left-name">
								<view>
									<text class="text1">笑***天</text>
									<text class="text2">斯柯达 明锐</text>
								</view>
								<view>
									<image src="https://z3.ax1x.com/2021/04/09/cU0zQI.png"></image>
									<image src="https://z3.ax1x.com/2021/04/09/cU0zQI.png"></image>
									<image src="https://z3.ax1x.com/2021/04/09/cU0zQI.png"></image>
									<image src="https://z3.ax1x.com/2021/04/09/cU0zQI.png"></image>
									<image src="https://z3.ax1x.com/2021/04/09/cU0zQI.png"></image>
									<text>5.00</text>
								</view>
							</view>
						</view>
						<view class="right">2020.09.04</view>

					</view>
					<view>门店服务热情，技师水平不错，流程比较规范，机油不错</view>
					<view>
						<image src="https://z3.ax1x.com/2021/04/09/cUwJN4.png"></image>
						<image src="https://z3.ax1x.com/2021/04/09/cUwGEF.png"></image>
						<image src="https://z3.ax1x.com/2021/04/09/cUw3HU.png"></image>
					</view>
				</view>
				<view class="evaluationItem">
					<view>
						<view class="left">
							<view class="left-image">
								<image src="https://z3.ax1x.com/2021/04/09/cUBd0K.png"></image>
							</view>
							<view class="left-name">
								<view>
									<text class="text1">笑***天</text>
									<text class="text2">斯柯达 明锐</text>
								</view>
								<view>
									<image src="https://z3.ax1x.com/2021/04/09/cU0zQI.png"></image>
									<image src="https://z3.ax1x.com/2021/04/09/cU0zQI.png"></image>
									<image src="https://z3.ax1x.com/2021/04/09/cU0zQI.png"></image>
									<image src="https://z3.ax1x.com/2021/04/09/cU0zQI.png"></image>
									<image src="https://z3.ax1x.com/2021/04/09/cU0zQI.png"></image>
									<text>5.00</text>
								</view>
							</view>
						</view>
						<view class="right">2020.09.04</view>

					</view>
					<view>门店服务热情，技师水平不错，流程比较规范，机油不错,直接每次点击选择器相反值,依次来达到更改样式的目的</view>
					<view>
						<image src="https://z3.ax1x.com/2021/04/09/cUwJN4.png"></image>
						<image src="https://z3.ax1x.com/2021/04/09/cUwGEF.png"></image>
						<image src="https://z3.ax1x.com/2021/04/09/cUw3HU.png"></image>
					</view>
				</view>
				<view class="enter">查看全部评价（9999+）</view>
			</view>
		</view>
		<!-- 车友 -->
		<view class="riders">
			<view>
				<view class="friend">问车友</view>
				<view class="riders-item">
					<image src="https://z3.ax1x.com/2021/04/09/cUYpp6.png"></image>
				</view>

			</view>
			<view>
				<view class="left">
					<text>问</text>
					<text>滴滴用这款可以吗？</text>
				</view>
				<view class="right">1个回答</view>
			</view>
			<view>查看全部回答</view>
		</view>


		<view class="location">
			<view class="locationLeft">
				<view class="one">
					<image src="https://z3.ax1x.com/2021/04/10/cUInXT.png"></image>
					<view>商城</view>
				</view>
				<view class="one">
					<image src="https://z3.ax1x.com/2021/04/10/cUIe10.png"></image>
					<view>客服</view>
				</view>
			</view>
			<view class="locationRight">
				<navigator @click="addOrder(ShowProduct)" url="../mall-shoppingCart/mall-shoppingCart"
					open-type="navigate">
					<text> 加入购物车</text>
				</navigator>
				<navigator url="../mall-pay/mall-pay" open-type="navigate">
					<text @click="addPayOrder(ShowProduct)">立即购买</text>
				</navigator>
			</view>
		</view>

	</scroll-view>
</template>

<script>
	// 状态机
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers("mall")

	export default {
		data() {
			return {
				swipers: [{
						id: 0,
						image: "https://z3.ax1x.com/2021/04/09/cNhGPx.png",
						price: 299.00
					},
					{
						id: 1,
						image: "https://z3.ax1x.com/2021/04/08/cYAeqH.png",
						price: 299.00
					},
					{
						id: 2,
						image: "https://z3.ax1x.com/2021/04/09/cNhGPx.png",
						price: 299.00
					}
				],
				obj: [
					"https://z3.ax1x.com/2021/04/09/cNhGPx.png",
					"https://z3.ax1x.com/2021/04/08/cYAeqH.png",
					"https://z3.ax1x.com/2021/04/09/cNhGPx.png"
				],
				isActive: false
			}
		},

		onLoad(option) {
			// console.log(option);
			const val = option.productId
			this.getShowProduct(val)

		},
		computed: {
			...mapState(["ShowProduct"])

		},
		methods: {
			...mapMutations(["setShowProduct"]),
			...mapActions(["getShowProduct"]),


			//保存一级分类id
			itemclick(e) {
				// console.log(e);
				uni.setStorageSync("Id", JSON.stringify(e))
			},

			//点击收藏
			clickActive(e) {
				if (this.isActive == false) {
					this.isActive = true
					const val = uni.getStorageSync("showProduct")
					if (val.length > 0) {
						val.push(e)
						// console.log(222,val);
						uni.setStorageSync("showProduct", val)
					} else {
						uni.setStorageSync("showProduct", [e])
					}

				} else {
					this.isActive = false
				}
			},
			//加入购物车
			addOrder(e) {
				const val = uni.getStorageSync("shoppingCart")
				if (!val) {
					uni.setStorageSync("shoppingCart", [e])
				} else {
					const arr1 = val.some((item, index) => {
						return item.productId == e.productId
					})
					if (!arr1) {
						uni.setStorageSync("shoppingCart", [e, ...val])
					} else {
						const arr2 = val.map((item) => {
							if (item.productId == e.productId) {
								item.productCollectnum += 1
							}
							return item
						})
						uni.setStorageSync("shoppingCart", [...arr2])
					}
				}
			},
			//立即购买
			addPayOrder(e) {
				uni.setStorageSync("paylist",[e])
			}


		}
	}
</script>

<style lang="scss" scoped>
	.productDetails {
		box-sizing: border-box;
		background-color: #f3f3f3;

		//商品介绍
		.product {
			background-color: #f3f3f3;
			width: 100vw;
			
			//轮播图
			.swipers {
				background-color: #FFFFFF;
				width: 100vw;
				text-align: center;
				.swiperItem {
					width: 98%;
					height: 450rpx;
					.items {
						width: 100%;
						height: 100%;
						position: relative;
						image {
							margin-top: 25rpx;
							position: absolute;
							left: 170rpx;
							width: 400rpx;
							height: 400rpx;
						}

					}



				}



			}

			//商品具体介绍
			.center {
				width: 100%;
				background-color: #f3f3f3;
				margin: 20rpx 20rpx 20rpx 20rpx;

				.introduce {
					// border:2rpx solid red;
					width: 95%;
					border-radius: 20rpx;
					background-color: #ffffff;
					padding: 24rpx;
					box-sizing: border-box;

					view {
						width: 100%;

						&:nth-of-type(1) {
							display: flex;
							align-items: center;
							// justify-content: space-around;
							height: 60rpx;

							.text1 {
								font-size: 28rpx;
								font-weight: 600;
								color: #ff7417;
								margin-right: 20rpx;
							}

							.text2 {
								font-size: 24rpx;
								font-weight: 600;
								margin-right: 10rpx;

							}

							image {
								width: 50rpx;
								height: 20rpx;
							}

							.right-image {
								float: right;
								margin-left: 350rpx;
								background-position: center;
								background-image: url(https://z3.ax1x.com/2021/04/19/coRe78.png);
								width: 50rpx;
								height: 50rpx;

								&.active {
									width: 50rpx;
									height: 50rpx;
									background-position: center;
									background-size: 30rpx 30rpx;
									background-repeat: no-repeat;
									background-image: url(https://z3.ax1x.com/2021/04/19/co4APS.png);
								}
							}
						}

						&:nth-of-type(2) {
							font-weight: 550;
							font-size: 26rpx;
							width: 100%;
							// height: 65rpx;
							overflow: hidden;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							margin-bottom: 20rpx;
						}

						&:nth-of-type(3) {
							margin-bottom: 20rpx;
							font-size: 28rpx;
						}

						&:nth-of-type(4) {
							font-size: 24rpx;
							color: #000000;
							opacity: 0.8;
						}
					}

				}

				.factory {
					margin-top: 10rpx;
					// border:2rpx solid red;
					width: 95%;
					padding: 10rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					background-color: #ffffff;
					// height: 60rpx;
					align-items: center;

					text {
						&:nth-of-type(1) {
							margin-left: 20rpx;
							font-size: 24rpx;
							margin-right: 20rpx;

						}

						&:nth-of-type(2) {
							font-size: 20rpx;
							opacity: 0.6;
						}
					}
				}

				.Indemnity {
					margin-top: 10rpx;
					// border:2rpx solid red;
					width: 95%;
					padding: 10rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					background-color: #ffffff;
					// height: 100rpx;
					align-items: center;

					view {
						&:nth-of-type(1) {
							margin-left: 20rpx;
							font-size: 24rpx;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
							margin-top: 10rpx;

						}

						&:nth-of-type(2) {
							margin-left: 20rpx;
							font-size: 20rpx;
							opacity: 0.6;
							margin-bottom: 10rpx;
						}
					}
				}
			}


		}

		//商品评价
		.productEvaluation {
			width: 100vw;
			margin: 20rpx 20rpx 20rpx 20rpx;

			.evaluationBoby {
				width: 95%;
				border-radius: 20rpx;
				background-color: #ffffff;
				padding: 24rpx;
				box-sizing: border-box;

				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					view {
						&:nth-of-type(1) {
							width: 50%;
							font-weight: 600;
						}

						&:nth-of-type(2) {
							font-size: 20rpx;
							// border: 2rpx solid red;
							width: 30%;

							.text1 {
								color: #808080;
								padding-right: 20rpx;
							}

							.text2 {
								color: #ff7417;
								font-weight: 600;
								padding-right: 20rpx;
							}

							image {
								width: 10rpx;
								height: 15rpx;
							}


						}
					}

				}

				.center {
					margin-top: 20rpx;
					margin-bottom: 10rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					view {
						padding-left: 10rpx;
						color: #000000;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 20rpx;
						background-color: #fff9b3;
						font-size: 20rpx;
						margin-bottom: 20rpx;
						opacity: 0.5;

					}
				}

				.evaluationItem {
					margin-top: 32rpx;
					border-bottom: 1rpx solid #F1F1F1;

					view {
						&:nth-of-type(1) {
							margin-bottom: 10rpx;
							display: flex;
							justify-content: space-between;

							.left {
								display: flex;

								.left-image {
									width: 100rpx;
									height: 100rpx;

									image {
										width: 80rpx;
										height: 80rpx;
										border-radius: 100rpx;
									}
								}

								.left-name {
									view {
										&:nth-of-type(1) {
											display: flex;
											align-items: center;

											.text1 {
												font-weight: 600;
												padding-right: 20rpx;
											}

											.text2 {
												font-size: 20rpx;
												opacity: 0.6;

											}
										}

										&:nth-of-type(2) {
											image {
												width: 20rpx;
												height: 20rpx;
											}

											text {
												font-size: 24rpx;
												color: #DD524D;
											}
										}
									}
								}
							}
						}

						&:nth-of-type(2) {
							font-size: 26rpx;
							margin-bottom: 10rpx;
							opacity: 0.7;
							overflow: hidden;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}

						&:nth-of-type(3) {
							display: flex;
							justify-content: space-between;
							margin-bottom: 40rpx;

							image {
								width: 200rpx;
								height: 200rpx;
							}
						}
					}
				}

				.enter {
					margin-top: 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #333333;
					font-size: 24rpx;
					opacity: 0.6;
				}
			}

		}

		//问车友
		.riders {
			margin-left: 20rpx;
			margin-bottom: 100rpx;
			width: 95%;
			border-radius: 20rpx;
			background-color: #ffffff;
			padding: 24rpx;
			box-sizing: border-box;

			view {
				&:nth-of-type(1) {
					display: flex;
					height: 60rpx;
					border-bottom: 1rpx solid #ebebeb;
					justify-content: space-between;

					.friend {
						font-weight: 600;
					}

					.riders-item {
						width: 30rpx;
						height: 30rpx;

						image {
							width: 15rpx;
							height: 20rpx;
						}
					}

				}

				&:nth-of-type(2) {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #ebebeb;

					.left {
						border-bottom: 2rpx solid #FFFFFF;

						text {
							display: flex;
							align-items: center;

							&:nth-of-type(1) {
								font-size: 20rpx;
								color: #DD524D;
								margin-right: 20rpx;
							}

							&:nth-of-type(2) {
								font-size: 22rpx;
								opacity: 0.6;
							}

						}

					}

					.right {
						font-size: 20rpx;
						color: #555555;
						opacity: 0.4;
					}
				}

				&:nth-of-type(3) {
					margin-top: 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #333333;
					font-size: 24rpx;
					opacity: 0.6;
				}
			}
		}

		//固定定位
		.location {
			width: 100%;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			display: flex;
			justify-content: center;

			.locationLeft {
				width: 40%;
				display: flex;

				.one {
					margin-top: 20rpx;
					color: #b3b3b3;
					font-size: 24rpx;
					text-align: center;

					image {
						margin-left: 20rpx;
						width: 50rpx;
						height: 50rpx;
						background-color: #FFFFFF;
						margin-right: 20rpx;
					}
				}

			}

			.locationRight {
				width: 45%;
				display: flex;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 20rpx;

				navigator {
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;

					&:nth-child(1) {

						text-align: center;
						border-radius: 50rpx 0rpx 0rpx 50rpx;
						background-color: #ffc755;
						width: 50%;
					}

					&:nth-child(2) {
						text-align: center;
						width: 50%;
						border-radius: 0rpx 50rpx 50rpx 0rpx;
						background-color: #ff0004;

					}
				}


			}
		}
	}
</style>
